import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';
import { worldData } from "./forMap/geojson";
import { resData } from "./forMap/worldData";

const configData = {
    max: resData.max,
    min: 0,
    data: resData.data
}

export default function WorldMap() {
    const ref = useRef(null);
    let mapInstance = null;

    const renderMap = () => {
        const renderedMapInstance = echarts.getInstanceByDom(ref.current);
        if (renderedMapInstance) {
            mapInstance = renderedMapInstance;
        } else {
            mapInstance = echarts.init(ref.current);
        }
        let { data, max, min } = configData;
        max = max > 1000 ? max : 1000;
        mapInstance.setOption({
            title: {
                // 标题组件
                text: "数据地图",
                // subtext: '数据来源于 xx平台',
                // sublink: 'http://www.census.gov/popest/data/datasets.html',
                left: "left",
                textStyle: {
                    color: "#000"
                }
            },
            tooltip: {
                // 提示框
                trigger: "item",
                showDelay: 0,
                transitionDuration: 0.2,
                formatter: function (params) {
                    let { data = {} } = params;
                    let { value = 0 } = data;
                    return `${params.name}<br/>
                  个数: ${value}`;
                }
            },
            visualMap: [
                {
                    dimension: 0,
                    right: 10,
                    top: 1,
                    orient: 'horizontal',
                    itemWidth: 12,
                    min: min,
                    max: max,
                    text: [`最大值：${max}`, 0],
                    textStyle: {
                        color: '#4a4a4a'
                    },
                    inRange: {
                        color: ['#d9e4fb', '#d8e3fa', '#88bbee', '#6ca5dc', '#6199d0', '#5d96cd', '#5890c7']
                    }
                }
            ],
            animationDurationUpdate: 1000,
            animationEasingUpdate: 'quinticInOut',
            timeline: {
                show: false
            },
            backgroundColor: '#ffffff',
            grid: {
                left: '10%',
                right: '45%',
                top: '70%',
                bottom: 20
            },
            xAxis: {
                show: false
            },
            yAxis: {
                show: false
            },
            series: [{
                id: 'map',
                type: 'map',
                mapType: 'world',
                right: "1%",
                top: "7%",
                bottom: "1%",
                left: 10,
                itemStyle: {
                    normal: {
                        areaColor: "rgb(245, 245, 245)", //地图模块未选中颜色
                        borderColor: "#d8d8de" //地图模块边框
                    },
                    emphasis: {
                        label: {
                            show: true
                        },
                        areaColor: "#90ed7d" //选中模块颜色
                    }
                },
                data: data
            }]
        });
    };

    useEffect(() => {
        echarts.registerMap("world", { geoJSON: worldData });
        renderMap();
    }, []);

    useEffect(() => {
        window.onresize = function () {
            mapInstance.resize();
        };
        return () => {
            mapInstance && mapInstance.dispose();
        };
    }, []);

    return <div style={{ width: "100%", height: "90vh" }} ref={ref} />;
}
